<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>iconfont Demo</title>
    <script src="./lib/jquery-3.5.1.min.js"></script>
    <script src="./lib/iconfont.js"></script>
    <style>
    </style>
</head>

<body>
    
    <div>
        <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#cn_circle_429_38"></use>
        </svg>
        <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#cn_normal_429_40"></use>
        </svg>
        <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#cn_square_429_41"></use>
        </svg>
    </div>
    <div>
        <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#ru_circle_667_38"></use>
        </svg>
        <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#ru_normal_667_40"></use>
        </svg>
        <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#ru_square_667_41"></use>
        </svg>
    </div>
    <div>
        <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#us_circle_699_38"></use>
        </svg>
        <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#us_normal_699_40"></use>
        </svg>
        <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#us_square_699_41"></use>
        </svg>
    </div>
    <script>

        var resTmp = `window._custom_iconfont_svg_string = '__custom_iconfont_svg_string',function(c){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var n,l,i,o,s,d=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}n=function(){var t,e=document.createElement("div");e.innerHTML=c._custom_iconfont_svg_string,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?d(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(n,0):(l=function(){document.removeEventListener("DOMContentLoaded",l,!1),n()},document.addEventListener("DOMContentLoaded",l,!1)):document.attachEvent&&(i=n,o=c.document,s=!1,r(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,a())})}function a(){s||(s=!0,i())}function r(){try{o.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}a()}}(window);`;

        function readFolder(folderPath, successCallback) {
            $.ajax({
                url: folderPath,
                dataType: 'json'
            }).done(function (data) {
                var requestList = [];
                data.forEach(function (value, index, arr) {
                    if (value.endsWith('.svg')) {
                        requestList.push($.get(`${folderPath}/${value}`));
                    }
                })
                successCallback(requestList);
            }).fail(function () {
                console.error('Failed to read folder.');
            });
        }

        function analysis(filePath, data) {
            let id = filePath.substring(filePath.lastIndexOf("/") + 1, filePath.lastIndexOf(".svg"));
            console.log(id);
            var svgElement = data.firstElementChild;
            var lastElementChild = svgElement.lastElementChild;
            if (lastElementChild.tagName == "script") {
                svgElement.removeChild(lastElementChild)
            }
            var children = svgElement.children;
            var symbolElement = document.createElement("symbol");
            symbolElement.setAttribute("viewBox", svgElement.getAttribute("viewBox"));
            symbolElement.setAttribute("id", id);
            symbolElement.append(...children);

            var classList = findClass(symbolElement);
            var htmlText = symbolElement.innerHTML;
            for(var i in classList){
                htmlText = htmlText.replace(new RegExp(classList[i], 'g'),`${id}-${i}`);
            }
            var idList = findId(symbolElement);
            for(var i in idList){
                htmlText = htmlText.replace(new RegExp(`\#${idList[i]}`, 'g'),`\#${id}-${i}`);
                htmlText = htmlText.replace(new RegExp(`\"${idList[i]}\"`, 'g'),`${id}-${i}`);
            }
            symbolElement.innerHTML = htmlText;
            return symbolElement;
        }

        function findClass(dom) {
            var elements = dom.getElementsByTagName("*");
            var iterator, s = new Set();
            for (var i = 0; i < elements.length; i++) {
                var classList = elements[i].classList;
                if (classList.length > 0) {
                    iterator = classList.values();
                    for (var value of iterator) {
                        s.add(value);
                    }
                }
            }
            return Array.from(s);
        }

        function findId(dom,id) {
            var elements = dom.getElementsByTagName("*");
            var s = new Set();
            for (var i = 0; i < elements.length; i++) {
                var id = elements[i].id;
                if (id) {
                    s.add(id);
                }
            }
            return Array.from(s);
        }

        function successCallback(requestList) {
            $.when.apply($, requestList).done(function () {
                var thatList = [], respList = [];
                if (this instanceof Array) {
                    thatList = this;
                    respList = arguments;
                } else {
                    thatList.push(this);
                    respList.push(arguments);
                }
                var svgElement = document.createElement("svg");
                for (var i = 0; i < thatList.length; i++) {
                    svgElement.append(analysis(thatList[i].url, respList[i][0]));
                }
                var res = resTmp.replace("__custom_iconfont_svg_string", svgElement.outerHTML);
                // console.log(res);
            });
        }

        $(document).ready(function () {
            readFolder('svg', successCallback);
        })
    </script>
</body>

</html>